<template>
	<div>
		<match-info-live
			v-if="data.isLive"
			class="py-[10px] px-2"
			:eventId="data.eventId"
			:sport-id="data.sportId"
			:league-id="data.leagueId"
			:league-name="data.leagueName"
			:date="data.startEventDate"
			:live-game-state="data.liveGameState"
			:channel="data.channel" />
		<match-live-stat
			v-if="data.isLive"
			:home-icon="data.homeIcon"
			:home-team-name="data.homeTeamName"
			:home-score="data.scores.homeScore"
			:home-red-cards="data.scores.homeRedCards"
			:home-yellow-cards="data.scores.homeYellowCards"
			:home-corners="data.scores.homeCorners"
			:away-icon="data.awayIcon"
			:away-team-name="data.awayTeamName"
			:away-score="data.scores.awayScore"
			:away-red-cards="data.scores.awayRedCards"
			:away-yellow-cards="data.scores.awayYellowCards"
			:away-corners="data.scores.awayCorners" />
		<match-info-upcoming
			v-else
			class="py-[10px] px-2"
			:sport-id="data.sportId"
			:league-id="data.leagueId"
			:league-name="data.leagueName"
			:date="data.startEventDate"
			:home-icon="data.homeIcon"
			:home-team-name="data.homeTeamName"
			:away-icon="data.awayIcon"
			:away-team-name="data.awayTeamName" />
	</div>
</template>

<script lang="ts" setup>
import { Match } from '@/types'
import { PropType } from 'vue'
import { MatchInfoUpcoming, MatchInfoLive, MatchLiveStat } from '../../match'

defineProps({
	data: {
		type: Object as PropType<Match>,
		required: true
	}
})
</script>
